<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* 知识： grid 区域布局，动画变量，重复利用动画 */

    body {
      background-color: antiquewhite;
    }

    .container {
      width: 400px;
      height: 400px;
      margin: auto;
      margin-top: 100px;

      display: grid;
      /* 三行三列 */
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-template:
        'A A B'
        'C D B'
        'C E E'
      ;

      gap: 10px;

    }

    .item {
      border: 1px solid #ccc;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;


    }

    /* 图片放大，让图片旋转时候，能够沾满item容器 */
    .item img {
      width: 500px;
      height: 300%;
      object-fit: cover;
    }

    /* 上面定义了grid区域，这里要指定每个区域代表哪个元素 */
    .item:nth-child(1) {
      grid-area: A;
    }

    .item:nth-child(2) {
      grid-area: B;
    }

    .item:nth-child(3) {
      grid-area: C;
    }

    .item:nth-child(4) {
      grid-area: D;
    }

    .item:nth-child(5) {
      grid-area: E;
    }

    /* 动画 */
    .container {
      --r: 360deg;
      animation: rotateF 5s linear infinite;
    }

    .item img {
      /* 图片反方向旋转 */
      --r: -360deg;
      animation: rotateF 5s linear infinite;


    }

    @keyframes rotateF {
      to {
        transform: rotate(var(--r));
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item"><img alt="" src="./images/1.jpg"></div>
    <div class="item"><img alt="" src="./images/2.jpg"></div>
    <div class="item"><img alt="" src="./images/3.jpg"></div>
    <div class="item"><img alt="" src="./images/6.jpg"></div>
    <div class="item"><img alt="" src="./images/5.jpg"></div>
  </div>


</body>

</html>